<template></template
><template>
    <div class="app-container">
        <!-- <el-tabs v-model="captainListTabModal" type="card" @tab-click="handleChangeTab"> -->
        <!-- <el-tab-pane label="团长列表" name="list"> -->
        <el-card class="filter-container" shadow="never">
            <el-row>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
            </el-row>
            <el-row class="row-margin">
                <el-form :model="listQuery1" ref="filterFormRef1" inline>
                    <el-form-item prop="supplierId">
                        <el-select v-model="listQuery1.supplierId" placeholder="供应商名称">
                            <el-option
                                v-for="item in supplierList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="nameOrTime">
                        <el-input
                            clearable
                            placeholder="商品名称/销售批次"
                            v-model="listQuery1.nameOrMobile"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="status">
                        <el-select v-model="listQuery1.status" placeholder="结算状态">
                            <el-option
                                v-for="item in SupplierStatus"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            style="margin-left: 10px;"
                            @click="querySettlementList"
                            type="primary"
                            >查询</el-button
                        >

                        <el-button @click="handleResetSettlSearch">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
        </el-card>
        <div class="table-container">
            <el-table
                ref="vipUser"
                :data="settleMentList"
                style="width: 100%"
                v-loading="listLoading1"
                border
            >
                <el-table-column label="活动批次" align="center">
                    <template slot-scope="scope">{{ scope.row.mobile }}</template>
                </el-table-column>
                <el-table-column label="商品信息" align="center">
                    <template slot-scope="scope">{{ scope.row.orderTimes }}</template>
                </el-table-column>
                <el-table-column label="供货单价" align="center">
                    <template slot-scope="scope">{{ scope.row.totalOrderAmount }}</template>
                </el-table-column>
                <el-table-column label="当期销售" align="center">
                    <template slot-scope="scope">{{ scope.row.refundTimes }}</template>
                </el-table-column>
                <el-table-column label="待结算金额" align="center">
                    <template slot-scope="scope">{{ scope.row.totalRefundAmount }}</template>
                </el-table-column>
                <el-table-column label="已结算金额" align="center">
                    <template slot-scope="scope">{{ scope.row.sale }}</template>
                </el-table-column>
                <el-table-column label="销售时间" align="center">
                    <template slot-scope="scope">{{ scope.row.lastOrderTime }}</template>
                </el-table-column>
                <el-table-column label="结算日期" align="center">
                    <template slot-scope="scope">{{
                        scope.row.bindedHeads ? scope.row.bindedHeads.name : ''
                    }}</template>
                </el-table-column>
                <el-table-column label="订单状态" align="center">
                    <template slot-scope="scope">{{ scope.row.status }}</template>
                </el-table-column>
                <el-table-column label="结算状态" align="center">
                    <template slot-scope="scope">{{ scope.row.status }}</template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text">{{
                            scope.row.status == 0 ? '发起结算' : ''
                        }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- <span>合计：已经结算金额：1111 待结算金额：12121212</span> -->
        <div class="pagination-container">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :page-size="listQuery1.pageSize"
                :page-sizes="[5, 10, 15]"
                :current-page.sync="listQuery1.pageNum"
                :total="total1"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
import { getCaptainQueryList, getCaptainAuditList, captainAdudit } from '@/api/captain';
import { settlementList, getSupplierList } from '@/api/supplier';
import PopConfirm from '@/components/PopConfirm/popConfirm';

const defaultListQuery = {
    pageNum: 1,
    pageSize: 5
};
export default {
    name: 'vip',
    components: {
        PopConfirm
    },
    data() {
        return {
            supplierList: {},
            nameSearchInput: '',
            captainListTabModal: 'list',
            captainDataList1: [],
            captainDataList2: [],
            settleMentList: [{ status: 0 }, { status: 1 }],
            listLoading1: false,
            listLoading2: false,
            listQuery1: Object.assign({}, defaultListQuery),
            listQuery2: Object.assign({}, defaultListQuery),
            total1: 0,
            total2: 0,
            phoneList: [],
            captainList: [],
            superSearchFlag: false,
            superSearchQuery: {},
            SupplierStatus: [
                { name: '待结算', id: 0 },
                { name: '已结算', id: 1 },
                { name: '不可结算', id: 2 }
            ]
        };
    },
    created() {
        this.getSupplierList();
        this.querySettlementList();
    },
    watch: {},
    filters: {},
    methods: {
        handleSuperSearchButton() {
            this.superSearchFlag = !this.superSearchFlag;
        },
        getSupplierList() {
            getSupplierList({}).then(res => {
                if (res.data.success) {
                    this.supplierList = res.data.data;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        querySettlementList() {
            let requestData = this.listQuery1;
            settlementList(requestData).then(res => {
                if (res.data.success == true) {
                    this.settleMentList = res.data.data;
                } else {
                    this.message.eror(res.data.msg);
                }
            });
        },
        handleResetSettlSearch() {
            this.$refs.filterFormRef1.resetFields();
        },
        handleSizeChange(val) {
            this.listQuery1.pageNum = 1;
            this.listQuery1.pageSize = val;
            this.querySettlementList();
        },
        handleCurrentChange(val) {
            this.listQuery1.pageNum = val;
            this.querySettlementList();
        }
    }
};
</script>
<style scoped lang="scss">
.from-to-input {
    width: 150px;
}
.item-margin {
    .el-form-item {
        margin-right: 50px;
    }
}
.super-search-card {
    background: rgba($color: #000000, $alpha: 0.05);
}
</style>

<style lang="scss"></style>
